<template>
    <div class="infowrap infowrap3">
        <el-dialog
      v-model="dialogVisible"
      title="批量新增"
      width="50%"
      custom-class="diyclass"
    >
      <div class="addwrap">
        <div class="ah" @click="downLoad">
          点击 <span>Excel模版文件</span> 下载至本地，
        </div>
        
        <!-- <el-upload
          
          class="upload-demo"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          multiple
          
        >
          <el-button type="primary" @click="uploadOne">上传文件</el-button>
         
        </el-upload> -->
        <div class="filediv" v-if="fileName">
          <el-icon><Document /></el-icon>
          <div>
            {{ fileName }}
          </div>
          
        </div>
        
        <el-upload
                        accept=".xls,.xlsx"
                        :before-upload="beforeUpload"
                        :file-list="fileList"
                        :on-remove="handleRemove"
                      >
              <el-button type="primary">上传文件</el-button>
        </el-upload>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button :disabled="fileName==''" @click="uploadOne">确认</el-button>
          <el-button type="primary" @click="handleClose">
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>
    </div>
  </template>
    
  <script lang="ts">
    import storage from '@/store'
  import { ElMessage } from 'element-plus'
  import { defineComponent,watch, ref,toRefs, reactive, onMounted, onUnmounted } from "vue";
  import { useRouter } from "vue-router";
  import { post, get } from "@/public/request/api";
  import Setting from "@/public/config"
import { type } from 'jquery';
  export default defineComponent({
    components: {},
    props: {
      type:String
    },
    
    setup(props, { emit }) {
      watch(() => props.type, (val) => {
        // 只监听父元素传来的type参数，type变化才会触发
        
        typeGet=val
      }, {
        deep: true
      })
      let showFlag=ref(false)
      const token = storage.state.ACCESS_TOKEN
      let typeGet=props.type
      //变量
      
      const dialogVisible = ref(false);
      let fileList = ref([]);
      const handleRemove =(file,files)=>{
          fileList.value = files;
      }
      let fdSend=null
      let fileName=ref('')
      // 生命周期
      onMounted(() => {
        //
      });
  
      onUnmounted(() => {
        //
      });
  
      //methods
      const beforeUpload = (file) => {
        
        
        const isLt2M = file.size / 1024 / 1024 < 10
        // if (!isLt2M) {
        //     ElMessage.error('上传图片大小不能超过 10MB！')
        //     return;
        // }
        // if(fileList.value.length>1){
        //     ElMessage.error('只支持上传一个文件')
        //     return;
        // }
 
        //这个设置上传多个文件，可根据自己业务情况决定，本文只是上传一个
        // if(fileList.value.length>3){
        //     ElMessage.error('只支持3个文件');
        //     return;
        // }
        let fd = new FormData()
        fd.append('file', file);
        fdSend=fd
        fileName.value=file.name
        console.log('fdxxx',fd);
        
        return false;
    }
      function downLoad(){
        if(typeGet=='device'){
          window.location.href = Setting.HttpApiAddress+'/simpleInfrastructure/download/template'
        }
        if(typeGet=='deviceroad'){
          window.location.href = Setting.HttpApiAddress+'/multiInfrastructure/download/template/road?access_token='+token
        }
        if(typeGet=='devicewater'){
          window.location.href = Setting.HttpApiAddress+'/multiInfrastructure/download/template/water?access_token='+token
        }
        if(typeGet=='plantType'){
          window.location.href = Setting.HttpApiAddress+'/crops/download/template'
        }
        if(typeGet=='farmSourceType'){
          window.location.href = Setting.HttpApiAddress+'/farmResource/download/template'
        }
        if(typeGet=='setType'){
          window.location.href = Setting.HttpApiAddress+'/device/download/template'
        }
      }
      function handleClose(){
        fdSend=null
        fileName.value=''
        dialogVisible.value = false
      }
      function uploadOne(){
        let url=''
        if(typeGet=='plantType'){
          url='/crops/import'
        }
        if(typeGet=='farmSourceType'){
          url='/farmResource/import'
        }
        if(typeGet=='setType'){
          url='/device/import'
        }
        if(typeGet=='device'){
          url='/simpleInfrastructure/import'
        }
        if(typeGet=='deviceroad'){
          url='/multiInfrastructure/import/road'
        }
        if(typeGet=='devicewater'){
          url='/multiInfrastructure/import/water'
        }
       
        post(url,fdSend).then(res=>{
          ElMessage({
            message: '数据导入成功',
            type: 'success',
          })
          dialogVisible.value = false
          emit("refreshList");
        })
      }
      // return
      return {
        handleClose,
        fileName,
        handleRemove,
        fileList,
        dialogVisible,
        beforeUpload,
        downLoad,
        uploadOne
      };
    },
  });
  </script>
    
    <style lang="scss">
  .m-2 {
    margin: 0 !important;
  }
  .infowrap3 {
      .el-input__wrapper,.el-textarea__inner{
          background: rgba(255, 255, 255, 0.08);
         box-shadow: none!important;
      }
      .el-date-editor.el-input{
          width: 530px;
      }
      
    .el-select .el-input__wrapper {
      width: 535px;
      border: none !important;
      height: 33px;
      background: rgba(255, 255, 255, 0.08);
    }
    .el-select--large {
      line-height: 30px !important;
      height: 30px !important;
    }
  }
  .leftselect {
    .el-select .el-input__wrapper {
      background: rgba(255, 255, 255, 0.08) !important;
      width: 200px;
      border-radius: 200px;
      border: none !important;
    }
  }
  </style>
  
    <style lang="scss" scoped>
  @import "@/assets/scss/index.scss";
  .filediv{
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }
  .addwrap{
  .ah{
    color: #fff;
    margin-bottom: 20px;
    span{
      cursor: pointer;
      color: #097fe5;
    }
  }
}
  .zywrap{
      display: flex;
      .mcontent2{
          margin-right: 20px;
      }
  }
  .picset {
    display: flex;
    align-items: center;
    .remark{
  
    }
    .xgsmall {
      margin-right: 10px;
    }
    .add {
      border-radius: 5px;
      width: 130px;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 255, 255, 0.08);
    }
  }
  .infowrap {
    .content4 {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
  
      .cchild {
        background: rgba(255, 255, 255, 0.08);
        border-radius: 15px;
        padding: 20px;
        width: 24%;
        margin-top: 20px;
        margin-right: 10px;
        .big {
          font-size: 20px;
        }
        .p3 {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .p3child {
            width: 49%;
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            .p3label {
              color: rgba(255, 255, 255, 0.6);
            }
            .num {
              font-weight: bold;
              font-size: 20px;
            }
          }
        }
        .p2 {
          display: flex;
          justify-content: space-around;
          .text {
            margin-left: 15px;
          }
          .p2left {
            display: flex;
            align-items: center;
            .name {
              font-weight: bold;
            }
            .label {
              color: rgba(255, 255, 255, 0.6);
              font-size: 14px;
            }
          }
          .zz {
            width: 60px;
            padding: 3px;
            background: #fff;
            border-radius: 300px;
          }
        }
        .p1 {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20px;
          .pbtn {
            display: flex;
            align-items: center;
            .pbnt1 {
              background: rgba(9, 127, 229, 1);
              border-radius: 5px;
              font-size: 10px;
              padding: 2px 15px;
              box-sizing: border-box;
              cursor: pointer;
            }
            .pbnt2 {
              background: rgba(255, 255, 255, 0.16) !important;
              margin-left: 10px;
            }
          }
        }
      }
    }
  
    .panelben3 {
      margin-top: 20px;
    }
    .btnwrap {
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      width: 400px;
  
      .btnc {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-right: 20px;
        padding: 10px 14px;
        margin-top: 10px;
        border-radius: 5px;
        background: rgba(9, 127, 229, 1);
        cursor: pointer;
      }
      .icon2 {
        width: 14px;
        margin-right: 6px;
      }
    }
  
    .content2 {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20px;
    }
    .cc {
      display: flex;
      background: rgba(255, 255, 255, 0.08);
      flex-direction: column;
      padding: 15px;
      border-radius: 10px;
      width: 19%;
      .cct2 {
        display: flex;
        font-size: 30px;
        font-weight: bold;
        margin-top: 10px;
        align-items: center;
        .icon {
          width: 50px;
          margin-right: 12px;
        }
      }
    }
  }
  </style>
    